<template>
  <div class="video-play" :class="isPlay ? '' : 'video-img'">
    <div v-if="isPlay" :id="`player-${showId}`"></div>
    <div v-else class="no-play">
      <div class="video-content" @click.stop="clickMasking">
        <img v-if="isShowPause" src="../assets/img/video-pause.png" alt="" />
      </div>
      <div class="video-time">
        <span>
          <span>{{ duration | filterTime(2, "m") }}</span>
        </span>
        <span v-if="number">已学{{ number }}遍</span>
      </div>
      <div :id="`player-${showId}`"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      player: null,
      videoId: "23d31bf205b0f3aa2b2fdc2990207a0b_2",
      isInitialized: false,
      duration: 0,
      getDurationNum: 5,
      playTime: 0,
      playTimeTimer: null,
      timerA: null,
    };
  },
  props: {
    isGameFlag:{
      type:Boolean,
      default:false
    },
    showId: {
      type: String,
    },
    vid: {
      type: String,
    },
    isPlay: {
      type: Boolean,
      default: true,
    },
    options: {
      type: Object,
    },
    number: {
      type: Number,
    },
    isShowPause: {
      type: Boolean,
      default: true,
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "",
    },
  },
  methods: {
    clickFun() {
      console.log("click");
      let playBtn = document
        .getElementById(`player-${this.showId}`)
        .querySelectorAll(".pv-playpause")[0];
      playBtn.removeEventListener("click", this.clickFun);
      this.$nextTick(() => {
        this.timePlan(1);
      });
    },
    timePlan(type) {
      let target = "";
      if (type == 1) {
        if (this.timerA) {
          clearInterval(this.timerA);
        }
        this.timerA = setInterval(() => {
          console.log(111);
          target = document
            .getElementById(`player-${this.showId}`)
            .getElementsByClassName("pv-icon-pause")[0];
          if (target) {
            target.disabled = true;
            clearInterval(this.timerA);
          }
        }, 200);
        return;
      }
      if (type == 2) {
        if (this.timerA) {
          clearTimeout(this.timerA);
        }
        this.timerA = setTimeout(() => {
          let playBtn = document
            .getElementById(`player-${this.showId}`)
            .querySelectorAll(".pv-controls .pv-playpause")[0];
          playBtn.removeEventListener("click", this.clickFun);
          target = document
            .getElementById(`player-${this.showId}`)
            .getElementsByClassName("pv-playpause")[0];
          if (target) {
            target.disabled = false;
          }
        }, 500);
        return;
      }
      if (type == 3) {
        if (this.timerA) {
          clearInterval(this.timerA);
        }
        this.timerA = setInterval(() => {
          let playBtn = document
            .getElementById(`player-${this.showId}`)
            .querySelectorAll(".pv-controls .pv-icon-btn-play")[0];
          if (playBtn) {
            playBtn.addEventListener("click", this.clickFun);
            clearInterval(this.timerA);
          }
        }, 200);
      }
    },
    clickMasking() {
      this.$emit("clickMasking");
    },
    //   获取视频总时长
    getDuration() {
      console.log(this.player.j2s_getDuration());
      this.duration = this.player.j2s_getDuration();
    },
    //
    getShowDuration() {
      let timer = setTimeout(() => {
        this.duration = this.player.HTML5.duration;
        this.getDurationNum--;
        clearTimeout(timer);
        if (!this.duration && this.getDurationNum >= 0) {
          this.getShowDuration();
        }
      }, 200);
    },
    //   初始化
    async initVideoPlay() {
      // option
      let option = Object.assign(
        {
          wrap: `#player-${this.showId}`,
          width: this.width,
          height: this.height,
          vid: this.vid,
          hideSwitchPlayer: true,
          cover_opacity: 0,
          teaser_show: false,
        },
        this.options
      );
      this.player = window.polyvPlayer(option);

      this.initializedPlay();
      this.getShowDuration();
      this.onReadyPlay();
      this.getShowDuration();
      this.timePlan(3);
      await this.onVideoPlay();
      this.onVideoPause();
      this.onPlayOver();
      // this.onPlayerError();
    },
    // 切换视频
    changeVid() {
      this.$emit("onVideoDestory", this.playTime);
      this.clearPlayTimeTimer();
      this.playTime = 0;
      this.player.changeVid(this.vid);
    },
    // 在已加载足够的数据能够开始播放视频时触发，参数返回vid
    onReadyPlay() {
      this.player.on("s2j_onReadyPlay", (...params) => {
        console.log("预览数据初始化完毕：", params);
      });
    },
    // 初始化完毕回调
    initializedPlay() {
      //s2j_onPlayerInitOver 播放器初始化完毕时触发。播放器提供的方法需要在此事件发生后才可以调用。参数返回vid
      this.player.on("s2j_onPlayerInitOver", (...params) => {
        console.log("播放器数据初始化完毕：", params);
        this.isInitialized = true;
        this.timePlan(2);
      });
    },
    // 视频开始播放的回调
    onVideoPlay() {
      let that=this
      return new Promise((reslove, reject) => {
        this.player.on(
          "s2j_onVideoPlay",
          (...params) => {
            reslove();
            console.log("开始播放", params);
            this.$emit("onVideoPlay",that.duration);
            this.startPlayTimeTimer();
          },
          () => {
            reject();
          }
        );
      });
    },
    //视频暂停时触发
    onVideoPause() {
      let that=this
      this.player.on("s2j_onVideoPause", (...params) => {
        console.log("暂停播放", params);
        this.$emit("onVideoPause",that.playTime);
        this.clearPlayTimeTimer();
      });
    },
    onPlayerError() {
      this.player.on("s2j_onPlayerError", (...params) => {
        console.log("播放出现错误", params);
      });
    },
    //播放完毕回调
    onPlayOver() {
      //s2j_onPlayOver 当前视频播放完毕时触发，参数返回vid。
      this.player.on("s2j_onPlayOver", (...params) => {
        console.log("播放完毕：", params);
        this.$emit("onPlayOver");
        this.clearPlayTimeTimer();
      });
    },
    startPlayTimeTimer() {
      if (this.playTimeTimer) {
        clearInterval(this.playTimeTimer);
      }
      this.playTimeTimer = setInterval(() => {
        this.playTime++;
      }, 1000);
    },
    clearPlayTimeTimer() {
      if (this.playTimeTimer) {
        clearInterval(this.playTimeTimer);
      }
    },
    initVideo() {
      if (this.player && (this.player.HTML5 || this.player.flash)) {
        this.changeVid();
      } else {
        this.initVideoPlay();
      }
    },
    // j2s_pauseVideo 暂停播放。
    pauseVideo() {
      if (this.player && this.isInitialized) {
        this.player.j2s_pauseVideo();
      }
    },
    // j2s_resumeVideo 恢复播放当前视频。
    resumeVideo() {
      if (this.player && this.isInitialized) {
        this.player.j2s_resumeVideo();
      }
    },
    getRealPlayStatus() {
      return this.player.j2s_realPlayStatus();
    },

    // destroy
    destroyedVideo() {
      if (this.player) {
        this.pauseVideo();
        this.player.destroy();
        this.$emit("onVideoDestory", this.playTime);
        this.clearPlayTimeTimer();
      }
      clearInterval(this.timerA);
    },
  },
  mounted() {
    if (this.isPlay == false) {
      this.initVideoPlay();
    }
  },
  beforeDestroy() {
    this.destroyedVideo();
  },
  destroyed() {},
  watch: {
    // vid: {
    //   handler: function () {
    //     this.initVideo();
    //   },
    // },
  },
};
</script>